<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script type="text/montage-serialization">
        {
            "owner": {
                "values": {
                    "element": {"#": "main"}
                }
            },
            "treeList": {
                "prototype": "montage/ui/tree-list.reel",
                "values": {
                    "element": {"#": "treeList"},
                    "isRootExpanded": true,
                    "rowHeight": 26,
                    "delegate": {"<-": "@owner"},
                    "controller": {"<-": "@treeController"},
                    "isSortable": true
                }
            },
            "treeController": {
                "prototype": "montage/core/tree-controller",
                "values": {
                    "data": {"<-": "@owner.root"}
                }
            },
            "treeListItem": {
                "prototype": "montage/ui/text.reel",
                "values": {
                    "element": {"#": "treeListItem"},
                    "node": {"<-": "@treeList:iteration.object"},
                    "value": {"<-": "@treeList:iteration.object.data.filename"},
                    "classList.has('locked')": {"<-": "@treeList:iteration.object.data.locked"}
                }
            },

            "expand": {
                "prototype": "montage/ui/checkbox.reel",
                "values": {
                    "element": {"#": "expand"},
                    "checked": {"<->": "@treeList:iteration.object.isExpanded"},
                    "classList.has('hide')": {"<-": "!@treeList:iteration.object.data.isDirectory"}
                }
            },

            "debugDraggingNode": {
                "prototype": "montage/ui/text.reel",
                "values": {
                    "element": {"#": "debugDraggingNode"},
                    "value": {"<-": "@treeList._draggingTreeNode.data.filename"}
                }
            },

            "debugOverNode": {
                "prototype": "montage/ui/text.reel",
                "values": {
                    "element": {"#": "debugOverNode"},
                    "value": {"<-": "@treeList._treeNodeOver.data.filename"}
                }
            },

            "debugDropNode": {
                "prototype": "montage/ui/text.reel",
                "values": {
                    "element": {"#": "debugDropNode"},
                    "value": {"<-": "@treeList._treeNodeWillAcceptDrop.data.filename"}
                }
            },

            "debugPlaceholderPosition": {
                "prototype": "montage/ui/text.reel",
                "values": {
                    "element": {"#": "debugPlaceholderPosition"},
                    "value": {"<-": "@treeList._placerholderPosition == 0 ? 'before' : @treeList._placerholderPosition == 1 ? 'after' : ''"}
                }
            },

            "isSortable": {
                "prototype": "montage/ui/checkbox.reel",
                "values": {
                    "element": {"#": "isSortable"},
                    "checked": {"<->": "!!@treeList.isSortable"}
                }
            },

            "isRootVisible": {
                "prototype": "montage/ui/checkbox.reel",
                "values": {
                    "element": {"#": "isRootVisible"},
                    "checked": {"<->": "!!@treeList.isRootVisible"}
                }
            },

            "lastActionReport": {
                "prototype": "montage/ui/text.reel",
                "values": {
                    "element": {"#": "lastActionReport"},
                    "value": {"<-": "@owner.lastActionReport"}
                }
            }
        }
    </script>
</head>
<body>
    <div data-montage-id="main" class="Main">
        <header>Tree List Sample</header>
        <section class="containers">
            <div class="options-container container">
                <h5>
                    <span>Options</span>
                </h5>
                <p>
                    <label>Is Sortable: </label>
                    <input type="checkbox" data-montage-id="isSortable" />
                </p>
                <p>
                    <label>Is Root Visible: </label>
                    <input type="checkbox" data-montage-id="isRootVisible" />
                </p>
            </div>
            <div class="tree-list-container container">
                <h5>
                    <span>Tree</span>
                </h5>
                <div class="tree-list-wrapper">
                    <div data-montage-id="treeList" class="tree-list">
                        <div class="tree-list-row">
                            <input type="checkbox" data-montage-id="expand" class="expand" />
                            <span data-montage-id="treeListItem"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="debug-container container">
                <h5>
                    <span>Debug</span>
                </h5>
                <p>
                    <span>Dragging Node: </span>
                    <span data-montage-id="debugDraggingNode" class="debug-value"></span>
                </p>
                <p>
                    <span>Over Node: </span>
                    <span data-montage-id="debugOverNode" class="debug-value"></span>
                </p>
                <p>
                    <span>Placeholder Position: </span>
                    <span data-montage-id="debugPlaceholderPosition" class="debug-value"></span>
                </p>
                <p>
                    <span>Drop Node: </span>
                    <span data-montage-id="debugDropNode" class="debug-value"></span>
                </p>
                <p>
                    <span>Last Action Report: </span>
                    <pre data-montage-id="lastActionReport" class="debug-value"></pre>
                </p>
            </div>
        </section>
    </div>
</body>
</html>
